<template>
  <div class="tabControl">
     <div v-for="(item,index) in titles" class="tab-control-item" :class="{active:index===currentIndex}" @click="itemclick(index)" >
       <span>{{item}}</span></div>
  </div>
</template>

<script>
  export default {
    name: "tabControl",
    props:{
      titles:{
        type:Array,
        //默认值是数组或对象时必须是对象
        default(){
          return[]
        }
      }
    },
    data(){
     return{
       currentIndex:0
     }
    },
     methods:{
       itemclick(index){
         this.currentIndex=index;
         //内部向外main传
         this.$emit('tabClick',index)
       }
     }
  }
</script>

<style scoped>
 .tabControl{
   display: flex;
   padding-top: 10px;
   padding-bottom: 10px;
   font-size: 15px;
   background-color: white;
 }
  .tab-control-item{
    flex: 1;
    text-align: center;
  }
  .active{
    color: var(--color-high-text);

  }
  .active span{
    padding: 5px;
    border-bottom: 3px solid var(--color-tint);
  }
</style>
